<template>
	<header class="eea-header">
		<!--<router-link class="logo" to='/' tag='div'>
			<img src="static/img/logo.png"/>
		</router-link>-->
		<div class="nav-item">
			<router-link exact :to="item.link" @mouseover='addClass($event)' @mouseleave='rmClass($event)' v-for="(item,index) in navItems" @click="toLink(item.link,$event)" 
				:key="index">
				{{item.text}}
			</router-link>
		</div>
	</header>
</template>

<script>
	const navItems = [{
		text: '首页',
		link: '/'
	}, {
		text: '关于我们',
		link: '/about'
	}, {
		text: '大共享',
		link: '/share'
	}, {
		text: '下载APP',
		link: '/download'
	}, {
		text: '加入我们',
		link: '/job'
	}, 
//	{
//		text: '最新消息',
//		link: '/latest'
//	}, 
	{
		text: 'Hextra（hxt）',
		link: '/htx'
	}, {
		text: 'HXT注册流程',
		link: '/htxRegist'
	}, {
		text: 'Hextra佣金计划',
		link: '/htxBonus'
	}, {
		text: 'HXT奖金制度',
		link: '/htxCommission'
	}, {
		text: 'HXT优惠扶持',
		link: '/htxDiscounts'
	}];
	export default {
		name: 'eea-header',
		data() {
			return {
				navItems: navItems,
				navIn: 'nav-out'
			}
		}
	}
</script>

<style lang='scss'>
	.eea-header {
		width: 100%;
		// height: 100px;
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		z-index: 9;
		min-width: 110px;
	}
	
	
	.logo {
		width: 54px;
		height: 54px;
		position: relative;
		left: 15%;
		top: 25%;
		cursor: pointer;
	}
	
	.nav-item {
		float: right;
		line-height: 100px;
        text-align: right;
	}
	
	.nav-item a {
		line-height: 26px;
		position: relative;
		display: inline-block;
		margin-right: 35px;
		color: white;
		cursor: pointer;
		font-size: 16px;
		color: #fff;
		opacity: 0.8;
		text-decoration: none;
		
		&:hover{
			color:#A3DAA5;
		}
	}
	
	.nav-item a.router-link-active {
		color: yellow;
	}
	
	@mixin nav-in {
		@-webkit-keyframes navin {
			0% {
				color: #a3daa5
			}
			100% {
				color: #0bfb13
			}
		}
		@-moz-keyframes navin {
			0% {
				color: #a3daa5
			}
			100% {
				color: #0bfb13
			}
		}
		@-ms-keyframes navin {
			0% {
				color: #a3daa5
			}
			100% {
				color: #0bfb13
			}
		}
		@-o-keyframes navin {
			0% {
				color: #a3daa5
			}
			100% {
				color: #0bfb13
			}
		}
		@keyframes navin {
			0% {
				color: #a3daa5
			}
			100% {
				color: #0bfb13
			}
		}
	}
	
	.nav-in {
		@include nav-in;
		-webkit-animation: navin .5s 0s ease both;
		-moz-animation: navin .5s 0s ease both;
		-ms-animation: navin .5s 0s ease both;
		-o-animation: navin .5s 0s ease both;
		animation: navin .5s 0s ease both;
	}
</style>